﻿<script>

var gameOptions =
{
	infiniteHealth: false,	//infinite health, but still take damage
	godMode: false,		//ignores damage
	title: "title",
	
	keys:
	{
		left: 65,	// A
		right: 68,	// D
		up: 87,		// W
		down: 83,	// S
		attack: 16,	// Shift
		jump: 32	// Space
	}
}

</script>

<!DOCTYPE html>
<html manifest="offline.appcache">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <title>Rytlock</title>
    
    <!-- Allow fullscreen mode on iOS devices. (These are Apple specific meta tags.) -->
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, target-densitydpi=device-dpi" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="HandheldFriendly" content="true" />

    <!-- All margins and padding must be zero for the canvas to fill the screen. -->
    <style type="text/css">
        * {
            padding: 0;
            margin: 0;
        }
        body {
			font-family: Arial, Helvetica, sans-serif;
            background: #000;
            color: #fff;
            overflow: hidden;
            -ms-touch-action: none;
        }
        canvas {
            -ms-touch-action: none;
        }
        .warning {
            display: none;
        }
		#settings
		{
			margin: 20px;
		}
		#controls input
		{
			width: 50px;
		}
		#controls div
		{
			display: inline-block;
			width: 80px;
		}
		#options div
		{
			display: inline-block;
			width: 130px;
		}
		#settings h1
		{
			margin-bottom: 10px;
		}
    </style>
    
    <script>
	function controls_setKey(e, o)
	{
		o.value = e.keyCode;
	}
	function settings_load()
	{
		document.getElementById("controls-jump").value = gameOptions.keys.jump;
		document.getElementById("controls-attack").value = gameOptions.keys.attack;
		document.getElementById("controls-up").value = gameOptions.keys.up;
		document.getElementById("controls-left").value = gameOptions.keys.left;
		document.getElementById("controls-right").value = gameOptions.keys.right;
		document.getElementById("controls-down").value = gameOptions.keys.down;
		
		document.getElementById("options-god").checked = gameOptions.godMode;
		document.getElementById("options-health").checked = gameOptions.infiniteHealth;
	}
	function settings_save()
	{
		gameOptions.keys.jump = parseInt(document.getElementById("controls-jump").value);
		gameOptions.keys.attack = parseInt(document.getElementById("controls-attack").value);
		gameOptions.keys.up = parseInt(document.getElementById("controls-up").value);
		gameOptions.keys.left = parseInt(document.getElementById("controls-left").value);
		gameOptions.keys.right = parseInt(document.getElementById("controls-right").value);
		gameOptions.keys.down = parseInt(document.getElementById("controls-down").value);
		
		gameOptions.godMode = document.getElementById("options-god").checked == true;
		gameOptions.infiniteHealth = document.getElementById("options-health").checked == true;
		gameOptions.title = document.getElementById("options-title").value;
	}
	function startGame()
	{
		document.getElementById("settings").style.display = "none";
		settings_save();
		cr_createRuntime("c2canvas");
	}
	</script>
</head> 
 
<body> 
    
    <div id="settings">
    	<div id="controls">
            <h1>Controls</h1>
            <div>Attack:</div><input id="controls-attack" type="text" onKeyDown="controls_setKey(event, this);return false;" /><br/>
            <div>Jump:</div><input id="controls-jump" type="text" onKeyDown="controls_setKey(event, this);return false;" /><br/>
            
            <div style="margin-top: 10px">Up:</div><input id="controls-up" type="text" onKeyDown="controls_setKey(event, this);return false;" /><br/>
            <div>Left:</div><input id="controls-left" type="text" onKeyDown="controls_setKey(event, this);return false;" /><br/>
            <div>Down:</div><input id="controls-down" type="text" onKeyDown="controls_setKey(event, this);return false;" /><br/>
            <div>Right:</div><input id="controls-right" type="text" onKeyDown="controls_setKey(event, this);return false;" />
        </div>
        
        <div id="options">
            <h1 style="margin-top: 20px;">Options</h1>
            <div>God Mode:</div><input id="options-god" type="checkbox" /><br/>
            <div>Infinite Health:</div><input id="options-health" type="checkbox" /><br/>
            <div style="margin-top: 10px">Show:</div><select id="options-title"><option selected value="title">Default</option><option value="easy">Quaggan Ending</option><option value="sad">Sad Rytlock Ending</option><option value="happy">Happy Rytlock Ending</option><option value="cinematic">Cinematics Team Ending</option></select><br/>
        </div>
        
        <input type="button" value="Start" onClick="startGame()" style="width: 80px; height: 30px; margin-top: 40px;" />
    </div>
    
    <div id="fb-root"></div>
    <div id="c2canvasdiv">
        <![if !IE]>
        <canvas id="c2canvas" width="320" height="240">
        <![endif]>
            <h1>Your browser does not appear to support the technology necessary to run this game.
            <br />
            <br />
            <a href="https://www.guildwars2.com/en/news/presenting-the-rytlocks-critter-rampage-game/">Read more about the making of this game</a>
            <br />
            <br />
            <a href="http://www.mozilla.com/firefox/">Mozilla Firefox</a><br/>
            <a href="http://www.google.com/chrome/">Google Chrome</a><br/>
            <a href="http://www.apple.com/safari/download/">Apple Safari</a><br/>
            <a href="http://www.google.com/chromeframe">Google Chrome Frame for Internet Explorer</a><br/></h1>
        <![if !IE]>
        </canvas>
        <![endif]>
        <div class="warning">
            <h1>Your browser does not appear to support the technology necessary to run this game.
            <br />
            <br />
            <a href="https://www.guildwars2.com/en/news/presenting-the-rytlocks-critter-rampage-game/">Read more about the making of this game</a>
            <br />
            <br />
            <a href="http://www.mozilla.com/firefox/">Mozilla Firefox</a><br/>
            <a href="http://www.google.com/chrome/">Google Chrome</a><br/>
            <a href="http://www.apple.com/safari/download/">Apple Safari</a><br/>
            <a href="http://www.google.com/chromeframe">Google Chrome Frame for Internet Explorer</a><br/></h1>
        </div>
    </div>
    
    
    <![if !IE]>
    <script src="jquery.min.js"></script>
    <script>window.jQuery || document.write("<script src='jquery-1.7.1.min.js'>\x3C/script>")</script>
    <script src="c2runtime.js"></script>
    <script>
		gameOptions.isReady = false;
		
        // Size the canvas to fill the browser viewport.
        jQuery(window).resize(function() {
            cr_sizeCanvas(jQuery(window).width(), jQuery(window).height());
        });
        
        // Start the Construct 2 project running on window load.
        jQuery(document).ready(function ()
        {           
            if($.browser.msie) {
                $(".warning").show();
                return;
            }

			settings_load();

            // Create new runtime using the c2canvas
            //cr_createRuntime("c2canvas");
        });
        
        // Pause and resume on page becoming visible/invisible
        function onVisibilityChanged() {
			//if (!gameOptions.isReady) return;
            if (document.hidden || document.mozHidden || document.webkitHidden || document.msHidden)
                cr_setSuspended(true);
            else
                cr_setSuspended(false);
        };
        
        document.addEventListener("visibilitychange", onVisibilityChanged, false);
        document.addEventListener("mozvisibilitychange", onVisibilityChanged, false);
        document.addEventListener("webkitvisibilitychange", onVisibilityChanged, false);
    </script>
    <![endif]>
</body> 
</html> 